<script>
import SaveDialog from "./components/SaveDialog.vue"
import UserAccountCard from "/src/views/manage/talent/emp/components/UserAccountCard.vue";
import SaveDialogOfAdd from "/src/views/manage/talent/emp/components/SaveDialogOfAdd.vue";

export default {
  components:{
    SaveDialogOfAdd,
    UserAccountCard,
    SaveDialog
  },
  data() {
    return {
      isInto:false,
      contentLoading: false,
      requestParamBind: {
        // 是否为管理员
        isAdmin: "",
        phone: "",
        realName:"",
        // 性别
        genderCode: "",
        // 政府津贴等级
        governmentAllowanceLevel:"",
      },
      requestParam: {
        data: {
          and: []
        },
        pageNumber: 1,
        pageSize: 100,
        sort: "gmtCreate",
        orderBy: "DESC"
      },
      bodyData: {
        content: [],
        number: 1,
        size: 5,
        totalElements: 1,
        totalPage: 1,
      },
      messageTypeCodeEnum: {
        notification: "通知",
        verification: "验证码",
        marketing: "营销推广",
        voice: "语音",
        logistics: "物流"
      }
    }
  },
  watch: {
    requestParamBind: {
      handler: function (val) {
        this.requestParam.data.and = [];

        this.requestParam.data.and.push({
          field: "isAdmin",
          operatorCode: "eq",
          value: val.isAdmin
        });

        if (val.realName) {
          this.requestParam.data.and.push({
            field: "realName",
            operatorCode: "vague",
            value: val.realName
          });
        }

        if (val.phone) {
          this.requestParam.data.and.push({
            field: "phone",
            operatorCode: "vague",
            value: val.phone
          });
        }

        if (val.genderCode) {
          this.requestParam.data.and.push({
            field: "genderCode",
            operatorCode: "eq",
            value: val.genderCode
          });
        }

        if (val.governmentAllowanceLevel) {
          this.requestParam.data.and.push({
            field: "governmentAllowanceLevel",
            // 大于或等于
            operatorCode: "ge",
            value: val.governmentAllowanceLevel
          });
        }


      },
      deep: true
    }
  },
  mounted() {
    this.getBodyData();
    let loading = this.$loading({
      lock: true,
      text: '加载中... 如果首次加载员工用户。比较慢',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    // 监听#intoIframe的消息
    window.addEventListener("message", (event) => {
      if (event.data.type === "into") {
        loading.close();
        this.isInto = true;
      }
    });
  },
  methods: {
    toRemove(res){
      // 是否确定删除,element-plus的
      this.$confirm(`是否删除${res.realName}[${res.phone}]`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$kt.requestSecurity.send({
          uri: "/user-account-web/admin/userAccount/remove",
          method: "POST",
          data: res,
          stateSuccess: (res) => {
            this.$message.success(res.msg);
            this.getBodyData();
            this.isInfoCardShow = false;
          },
          stateFail: (err) => {
            this.$message.error(err.errMsg);
          }
        })
      })
    },
    /**
     * 获取消息类型名称
     * @param code
     * @returns {*}
     */
    getMessageTypeName(code) {
      return this.messageTypeCodeEnum[code];
    },
    changePageSize(val) {
      this.requestParam.pageSize = val;
      this.getBodyData();
    },
    changePageNumber(val) {
      this.requestParam.pageNumber = val;
      this.getBodyData();
    },
    /**
     * 请求
     */
    getBodyData() {
      this.contentLoading = true;
      this.$kt.requestSecurity.send({
        uri: "/user-account-web/admin/userAccount/getBodyData",
        data: this.requestParam,
        stateSuccess: (res) => {
          this.bodyData = res.data;
          // console.debug("用户信息", JSON.stringify(this.bodyData.content[0]));
          setTimeout(() => {
            this.contentLoading = false;

          }, 500);
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
          setTimeout(() => {
            this.contentLoading = false;
          }, 500);
        }
      });
    }
  }
}

</script>

<template>
  <div class="box">
    <div style="text-align: left">
      <el-scrollbar style="width: 100vw">

        <el-form
            :inline="true"
            :model="requestParamBind"
            label-position="top"
            @submit.native.prevent
            class="el-form"
            style="width: 1200px"
        >
          <el-form-item label="是否为管理员">
            <el-select
                style="width: 150px"
                v-model="requestParamBind.isAdmin"
                @change="getBodyData"
                placeholder="请选择">
              <el-option
                  label="全部"
                  :value="''"
              ></el-option>
              <el-option
                  label="是"
                  :value="true">
              </el-option>
              <el-option
                  label="否"
                  :value="false">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
              label="姓名">
            <el-input
                @keyup.enter.native="getBodyData"
                v-model="requestParamBind.realName"></el-input>
          </el-form-item>

          <el-form-item
              label="手机号">
            <el-input
                @keyup.enter.native="getBodyData"
                placeholder="请勿输入区号"
                v-model="requestParamBind.phone"></el-input>
          </el-form-item>

          <el-form-item label="性别">
            <el-select
                @change="getBodyData"
                style="width: 150px"
                v-model="requestParamBind.genderCode">
              <el-option
                  label="全部"
                  :value="''">
              </el-option>
              <el-option
                  label="男"
                  :value="'male'">
              </el-option>
              <el-option
                  label="女"
                  :value="'female'">
              </el-option>
            </el-select>
          </el-form-item>


          <el-form-item
          label="政府津贴"
          >
          <el-select
          style="width: 160px"
          v-model="requestParamBind.governmentAllowanceLevel"
          @change="getBodyData"
          placeholder="请选择">
          <el-option
          label="全部"
          :value="''"
          ></el-option>
          <el-option
          label="国务院政府津贴"
          :value="10000">
          </el-option>
          <el-option
          label="省政府及以上津贴"
          :value="9000">
          </el-option>
          </el-select>
          </el-form-item>


        </el-form>
      </el-scrollbar>

      <div style="text-align: right">
        <el-button
            type="primary"
            @click="getBodyData">查询/刷新
        </el-button>
        <el-button
            @click="$refs.saveDialogOfAdd.open({})">
          +添加员工
        </el-button>
        <div style="height: 10px"></div>
      </div>

    </div>
    <iframe
        class="iframe iframe-user-info-phone"
        id="intoIframe"
        style="width: 0;height: 0;border:none"
        :src='`${$kt.request.getRootAddress()}/phoneIframe/index.html#/pages/into/into`'></iframe>
    <div style="position: relative">
      <el-scrollbar
          v-if="isInto"
          v-loading="contentLoading"
          style="height: calc(100vh - 220px)">
        <div
            v-for="item in bodyData.content"
            class="box-box">
          <user-account-card
              @toSave="(res)=>$refs.saveDialog.open(res)"
              @toRemove="(res)=>toRemove(res)"
          :userInfo="item"
          ></user-account-card>
        </div>


      </el-scrollbar>
    </div>

    <div style="height: 15px"></div>

    <!-- 分页 -->
    <el-pagination
        style="margin-left: 50%;transform: translateX(-50%)"
        :page-size="requestParam.pageSize"
        :current-page="requestParam.pageNumber"
        :page-sizes="[100, 200, 300, 400, 500,10000]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="bodyData.totalElements"
        @size-change="changePageSize"
        @current-change="changePageNumber"/>

  </div>

  <!-- 用于保存的对话框 -->
  <save-dialog
      @save="getBodyData()"
      ref="saveDialog"/>

  <save-dialog-of-add
      @save="getBodyData()"
    ref="saveDialogOfAdd"
  ></save-dialog-of-add>

</template>

<style lang="scss" scoped>
.box {
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

.box-box {
  display: inline-block;
  margin: 20px;
  width: 350px;
}

.el-form {
  // 不换行
  white-space: nowrap;
  max-width: 1500px;
}


</style>